import { createSlice, PayloadAction } from '@reduxjs/toolkit';
import { 
  ThemeType, 
  ThemeConfig, 
  ThemeSettings, 
  LayoutStyle,
  themeConfigs, 
  defaultThemeSettings 
} from '@/types/theme';
import { STORAGE_KEYS } from '@/constants/storage';

// 主题状态接口
interface ThemeState {
  currentTheme: ThemeType;
  themeConfig: ThemeConfig;
  settings: ThemeSettings;
}

// 从本地存储获取主题设置
const getInitialThemeSettings = (): ThemeSettings => {
  try {
    const savedSettings = localStorage.getItem(STORAGE_KEYS.THEME_SETTINGS);
    return savedSettings ? JSON.parse(savedSettings) : defaultThemeSettings;
  } catch {
    return defaultThemeSettings;
  }
};

// 从本地存储获取主题设置，默认为浅色主题
const getInitialTheme = (): ThemeType => {
  const settings = getInitialThemeSettings();
  return settings.isDarkMode ? 'dark' : 'light';
};

// 初始状态
const initialState: ThemeState = {
  currentTheme: getInitialTheme(),
  themeConfig: themeConfigs[getInitialTheme()],
  settings: getInitialThemeSettings()
};

// 保存设置到本地存储
const saveSettings = (settings: ThemeSettings) => {
  try {
    localStorage.setItem(STORAGE_KEYS.THEME_SETTINGS, JSON.stringify(settings));
  } catch (error) {
    // Failed to save theme settings to localStorage
  }
};

// 主题 slice
const themeSlice = createSlice({
  name: 'theme',
  initialState,
  reducers: {
    // 切换主题
    toggleTheme: (state) => {
      const newTheme: ThemeType = state.currentTheme === 'light' ? 'dark' : 'light';
      state.currentTheme = newTheme;
      state.themeConfig = { ...themeConfigs[newTheme], primaryColor: state.settings.primaryColor };
      state.settings.isDarkMode = newTheme === 'dark';
      
      saveSettings(state.settings);
    },
    
    // 设置特定主题
    setTheme: (state, action: PayloadAction<ThemeType>) => {
      const newTheme = action.payload;
      state.currentTheme = newTheme;
      state.themeConfig = { ...themeConfigs[newTheme], primaryColor: state.settings.primaryColor };
      state.settings.isDarkMode = newTheme === 'dark';
      
      saveSettings(state.settings);
    },
    
    // 更新主题设置
    updateThemeSettings: (state, action: PayloadAction<Partial<ThemeSettings>>) => {
      state.settings = { ...state.settings, ...action.payload };
      
      // 如果暗黑模式状态改变，更新主题
      if (action.payload.isDarkMode !== undefined) {
        const newTheme: ThemeType = action.payload.isDarkMode ? 'dark' : 'light';
        state.currentTheme = newTheme;
        state.themeConfig = themeConfigs[newTheme];
      }
      
      // 如果主色调改变，更新主题配置
      if (action.payload.primaryColor) {
        state.themeConfig.primaryColor = action.payload.primaryColor;
      }
      
      saveSettings(state.settings);
    },
    
    // 设置布局风格
    setLayoutStyle: (state, action: PayloadAction<LayoutStyle>) => {
      state.settings.layoutStyle = action.payload;
      saveSettings(state.settings);
    },
    
    // 设置主色调
    setPrimaryColor: (state, action: PayloadAction<string>) => {
      state.settings.primaryColor = action.payload;
      state.themeConfig.primaryColor = action.payload;
      saveSettings(state.settings);
    },
    
    // 重置主题设置
    resetThemeSettings: (state) => {
      state.settings = defaultThemeSettings;
      state.currentTheme = 'light';
      state.themeConfig = themeConfigs['light'];
      saveSettings(state.settings);
    }
  }
});

export const { 
  toggleTheme, 
  setTheme, 
  updateThemeSettings, 
  setLayoutStyle, 
  setPrimaryColor, 
  resetThemeSettings 
} = themeSlice.actions;

export default themeSlice.reducer;